<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { projectListApi } from "@/api";
const router = useRouter();
const projectList = ref([
  {
    id: "3,5",
    title: "亚非移居",
    project: [],
  },
  {
    id: "2",
    title: "欧洲移居",
    project: [],
  },
  {
    id: "1",
    title: "美洲移居",
    project: [],
  },
  {
    id: "4",
    title: "大洋洲移居",
    project: [],
  },
]);
const getProjectList = () => {
  projectListApi({ page_size: 1000 }).then((res) => {
    if (res.items.length == 0) return;
    res.items.forEach((item) => {
      if (item.project_area_state == 3 || item.project_area_state == 5) {
        projectList.value[0].project.push(item);
      } else if (item.project_area_state == 2) {
        projectList.value[1].project.push(item);
      } else if (item.project_area_state == 1) {
        projectList.value[2].project.push(item);
      } else if (item.project_area_state == 4) {
        projectList.value[3].project.push(item);
      }
    });
  });
};
const nav = (id) => {
  router.push({ name: "projectDetails", query: { id } });
};
onMounted(() => {
  getProjectList();
});
</script>
<template>
  <div class="flex flex-col gap-3 p-3">
    <t-card
      :title="item.title"
      v-for="item in projectList"
      :key="item.title + item.id"
    >
      <div class="flex flex-col gap-3">
        <div class="relative" v-for="pro in item.project" @click="nav(pro.id)">
          <div
            class="relative w-full pb-[66%] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:opacity-50 after:z-10"
          >
            <img
              class="absolute w-full h-full object-cover"
              :src="pro.project_image_url_1"
              alt=""
            />
          </div>
          <div class="absolute z-20 top-0 w-full h-full p-3">
            <div class="text-xl">{{ pro.project_title }}</div>
            <t-typography-paragraph :ellipsis="{ row: 5 }">
              {{ pro.project_intro }}
            </t-typography-paragraph>
            <div class="w-full text-right text-[#666]">
              {{ pro.update_time }}
            </div>
          </div>
        </div>
      </div>
    </t-card>
  </div>
</template>

<style lang="scss" scoped>
:deep(.t-card__body) {
  padding: 0 12px 10px;
}
</style>
